<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>

    <script>
        var btn = document.getElementById("btn");
        bindEvent(btn,"click", function () {
            console.log(111);
        })
        // 解决浏览器兼容问题
        /***
         * 实现bindEvent方法
         * @dom 元素对象
         * @type  事件类型
         * @fn 事件回调函数
         * */
        function bindEvent(dom, type, fn) { 
            // 判断是否为ie浏览器
            if (dom.addEventListener) {
                // 都在冒泡阶段触发
                dom.addEventListener(type, fn);
            } else if (dom.attachEvent) {
                dom.attachEvent("on" + type, fn);
            } else {
                // 缓存
                var oldFn = dom["on" + type];
                // dom0级别
                dom["on" + type] = function () {
                    // 如果已经绑定过先执行之前的
                    oldFn && oldFn();
                    // 再执行后面的
                    fn();
                }
            }
        }

    </script>
</body>
</html>